{% extends 'log_reg_base.html' %}
{% load staticfiles %}
{% block title %}
    注册
{% endblock %}
{% block base_body %}
    <div class="wrapper">
        <img src={% static "/media/registerLogo.png" %} alt="" class="logo">
        <h3>快来注册</h3>
        <form action="{% url 'user: register' %}" method="POST" role="form">
            {% csrf_token %}
            <div class="form-group">
                <input type="text" class="form-control" value="{% if username != '' %}{{ username }}{% endif %}" id="phone" name="phone" placeholder="请输入名称">
                <label for="name">名称不能为空</label>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" value="{% if usermail != '' %}{{ usermail }}{% endif %}" id="mail" name="mail" placeholder="请输入邮箱">
                <label for="name"></label>
            </div>
            <div class="form-group ">
                <div class="input-group">
                    <input type="text" class="form-control" value="{% if verify != '' %}{{ verify }}{% endif %}" id="verify" name="verify" placeholder="看不清请点击验证码">
                    <span class="input-group-addon" style="display: block;"><img id="change" src="{% url 'user:verify' %}?"></span>
                    <label for="name"></label>
                </div>
            </div>
            <div class="form-group">
                <input type="password" class="form-control" value="{% if pwd != '' %}{{ pwd }}{% endif %}" id="pwd" name="pwd" placeholder="请输入密码">
                <label for="name"></label>
            </div>
            <div class="form-group">
                <input type="password" class="form-control" value="{% if repwd != '' %}{{ repwd }}{% endif %}" id="repwd" name="repwd" placeholder="请重新输入密码">
                <label for="name"></label>
            </div>
            <div class="form-group">
                <input type="checkbox" name="help" id="help"><span>我同意《用户手册》和《保密条款》</span>
            </div>
            <button type="submit" class="btn btn-lg btn-block register" id="confirm">注册</button>
            <a href={% url 'user:login' %} type="button" class="btn btn-lg btn-default btn-block login ">已有账号，请登录</a>
        </form>
        <div class="forget"><a href={% url 'user:find_pwd' %}>忘记密码在这里找回</a></div>
    </div>



{% endblock %}

{% block bottom_js %}
    <script>
        $(function () {
        var error =  '{{ err }}';
        if (error != ''){
            alert(error)
        }
            var phone = false;
            var mail = false;
            var verify = false;
            var pwd = false;
            var repwd = false;
            var help = false;
            var pho = $('#phone');
            var mai = $('#mail');
            var veri = $('#verify');
            var p = $('#pwd');
            var rep = $('#repwd');
            var hel = $('#help');
            var change = $('#change')
            change.click(function(){
                $(this).prop('src' ,$(this).prop('src')+1)
            });



            function CheckPhone() {
                if (pho.val() == '') {
                    pho.next().html('名称不能为空');
                    pho.next().show();
                    phone = true;
                }else{
                    phone = false
                }

            }

            function CheckMail() {
                var re = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
                if (mai.val() == '') {
                    mai.next().html('邮箱不能为空');
                    mai.next().show();
                    mail = true;
                } else if (!re.test(mai.val())) {
                    mai.next().html('邮箱格式不争确');
                    mai.next().show();
                    mail = true;
                }else{
                    mail = false
                }

            }

            function CheckVerify() {
                if (veri.val() == '') {
                    veri.siblings('label').html('验证码必须输入');
                    veri.siblings('label').show();
                    verify = true;
                }else{
                    verify = false;
                }
            }

            function Checkpwd() {
                var re = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/;
                if (p.val() == '') {
                    p.next().html('密码不能为空');
                    p.next().show();
                    pwd = true;
                } else if (!re.test(p.val())) {
                    p.next().html('密码长度要大于6位，由数字和字母组成');
                    p.next().show();
                    pwd = true;
                }else{}
                pwd = false;
            }

            function CheckRepwd() {
                if (rep.val() == '') {
                    rep.next().html('密码不能为空');
                    rep.next().show();
                    repwd = true;
                } else if (p.val() != rep.val()) {
                    rep.next().html('密码不一致');
                    rep.next().show();
                    repwd = true;
                }else{
                    repwd = false
                }
            }

            function CheckHelp() {
                if (!hel.is(':checked')) {
                    alert('请同意条款');
                    help = true;
                }else{
                    help = false;
                }

            }

            pho.focus(function () {
                $(this).next().html('');
            });

            pho.blur(function () {
                CheckPhone()
            });

            mai.focus(function () {
                $(this).next().html('');
            });

            mai.blur(function () {
                CheckMail();
            });

            veri.focus(function () {
                $(this).siblings('label').html('');
            });

            veri.blur(function () {
                CheckVerify();
            });

            p.focus(function () {
                $(this).next().html('');
            });

            p.blur(function () {
                Checkpwd();
            });

            rep.focus(function () {
                $(this).next().html('');
            });

            rep.blur(function () {
                CheckRepwd();
            });

            $('form').submit(function () {
                CheckHelp();
                CheckPhone();
                Checkpwd();
                CheckRepwd();
                CheckVerify();
                CheckMail();


                if (phone == false && mail == false && repwd == false && verify == false && help == false) {
                    return true;
                } else {
                    return false;
                }

            })

        })
    </script>
{% endblock %}




</body>

</html>